<template>
  <div class="layout">
    <!-- 头部 -->
    <header class="app-header">
      <div class="header-content">
        <div class="container d-flex justify-content-between align-items-center">
          <div class="d-flex align-items-center">
            <i class="fa-solid fa-graduation-cap me-2" />
            <h1>学习平台</h1>
          </div>

          <nav class="d-none d-md-flex">
            <a href="#">首页</a>
            <a href="#">课程</a>
            <a href="#">资源</a>
            <a href="#">社区</a>
          </nav>

          <div class="d-flex align-items-center">
            <button class="btn btn-link me-3">
              <i class="fa-solid fa-bell" />
            </button>

            <div class="dropdown me-3">
              <button
                class="btn btn-link dropdown-toggle"
                data-bs-toggle="dropdown"
              >
                <img
                  src="https://picsum.photos/40/40?random=user"
                  alt="用户头像"
                  class="rounded-circle me-2"
                >
                <span>未登录用户</span>
                <i class="fa-solid fa-chevron-down ms-1" />
              </button>
              <ul class="dropdown-menu dropdown-menu-end">
                <li>
                  <a
                    class="dropdown-item"
                    href="#"
                  >个人中心</a>
                </li>
                <li>
                  <a
                    class="dropdown-item"
                    href="#"
                  >设置</a>
                </li>
                <li><hr class="dropdown-divider"></li>
                <li>
                  <a
                    class="dropdown-item text-danger"
                    href="#"
                  >退出登录</a>
                </li>
              </ul>
            </div>

            <button class="btn btn-link d-md-none">
              <i class="fa-solid fa-bars" />
            </button>
          </div>
        </div>
      </div>
    </header>

    <!-- 页面内容插槽 -->
    <main class="app-main container-fluid">
      <slot />
    </main>
  </div>
</template>

<script setup>
// 你可以在这里添加响应式逻辑或用户信息获取
</script>

<style scoped>
.app-header {
  background-color: #fff;
  border-bottom: 1px solid #ddd;
  padding: 1rem 0;
}

.header-content .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dropdown-toggle::after {
  display: inline-block;
  margin-left: 0.255em;
  vertical-align: 0.255em;
  content: "";
  border-top: 0.3em solid;
  border-right: 0.3em solid transparent;
  border-bottom: 0;
  border-left: 0.3em solid transparent;
}

.fa-bell {
  font-size: 1.2rem;
}
</style>